<template>
    <div class="signin-box">
        <div class="signin-container">
            <h4 class="title">注 册</h4>
            <div id="signupForm">
                <validator name="signupValidation">
                    <form class="signin-form form-horizontal" @submit.prevent="reg($signupValidation)" novalidate>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-user"></i>
                                </div>
                                <input type="text"
                                       v-model="user.nickname"
                                       v-validate:nickname="{ required: true}"
                                       class="form-control"
                                       :class="[$signupValidation.nickname.invalid ? 'ng-invalid':ng-valid,$signupValidation.nickname.dirty?'ng-dirty':'']"
                                       placeholder="昵称"
                                />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-envelope-o"></i>
                                </div>
                                <input type="text"
                                       v-model="user.email"
                                       v-validate:email="{ required: true, minlength: 3, maxlength: 30, email:true }"
                                       class="form-control"
                                       :class="[$signupValidation.email.invalid ? 'ng-invalid':ng-valid,$signupValidation.email.dirty?'ng-dirty':'']"
                                       placeholder="邮箱"
                                />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-unlock-alt"></i>
                                </div>
                                <input type="password"
                                       v-model="user.password"
                                       v-validate:password="{required: true}"
                                       class="form-control"
                                       :class="[$signupValidation.password.invalid? 'ng-invalid':ng-valid,$signupValidation.password.dirty?'ng-dirty':'']"
                                       placeholder="密码"
                                />
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary btn-lg btn-block" type="submit" id="signin_btn" :disabled="$signupValidation.invalid">注 册</button>
                        </div>
                    </form>
                </validator>
            </div>
        </div>
    </div>
</template>
<script>

    import {register} from '../../vuex/actions'
    export default{
        el (){
            return '#signupForm';
        },
        validators: {
            email: function (val) {
                return /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(val)
            }
        },
        data(){
            return{
                user:{
                    email:'',
                    password:'',
                    nickname:''
                }
            }
        },
        methods:{
            reg(signupValidation){
                if (signupValidation.valid){
                    this.register(this.user)
                }
            }
        },
        vuex:{
            actions:{
                register
            }
        }
    }
</script>
<style>

</style>
